<script lang="ts" setup>
import { computed } from "vue";
import { ElMessageBox } from "element-plus";
import { PublicDialogEmitEvents, PublicDialogProps } from "#/element-plus";

const props = withDefaults(defineProps<PublicDialogProps>(), {});
const emit = defineEmits<PublicDialogEmitEvents>();

// 控制弹框的显示
const isOpen = computed({
	get: () => props.isOpen,
	set: (value) => emit("update:isOpen", value),
});

const handleClose = (done: () => void) => {
	ElMessageBox.confirm("确认关闭么?")
		.then(() => {
			done();
		})
		.catch(() => {
			// catch error
		});
};
</script>

<template>
	<el-dialog v-model="isOpen" title="Tips" width="500" :before-close="handleClose">
		<span>这是一条消息？</span>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="isOpen = false">Cancel</el-button>
				<el-button type="primary" @click="isOpen = false"> Confirm </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<style scoped></style>
